<template>
  <div class="table-container pull-chheight">
    <avue-crud :option="tableOption" v-model="user" :data="tableData" :table-loading="tableLoading" :before-open="boxhandleOpen" :before-close="boxhandleClose" @row-dblclick="handleRowDBLClick" @row-click="handleRowClick" :page="page" ref="crud" @row-save="handleSave" @row-update="handleUpdate" @row-del="handleDel" @refresh-change="handlerefreshChange" @current-change="handleCurrentChange" @search-change="handleSearchChange" @selection-change="handleSelectionChange">
      <div class="table-header" slot="headerAfter">
        <el-button type="primary" @click="handleAdd" size="small" v-if="permission.sys_crud_btn_add">新 增</el-button>
        <el-button type="primary" @click="handleRowEdit" size="small">编 辑</el-button>
        <el-button type="primary" @click="handleRowDel" size="small">删 除</el-button>
        <el-button type="info" @click="handleExport" size="small" v-if="permission.sys_crud_btn_export">导出excel</el-button>
        <el-button type="warning" @click="handleJpeg" size="small">导出图片</el-button>
        <el-button type="danger" @click="toggleSelection([tableData[1]])" size="small">切换第二选中状态</el-button>
        <el-button @click="toggleSelection()" size="small">取消选择</el-button>
        <el-button type="success" size="small" v-if="permission.sys_crud_btn_add">
          <router-link :to="{path:'/forms/index'}">
            表单CRUD
          </router-link>
        </el-button>
      </div>
      <template slot="headerMenu">
        <el-button type="primary" icon="el-icon-edit" @click="handleRowEdit" circle size="small"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle size="small" @click="handleRowDel"></el-button>
      </template>
      <template slot-scope="props" slot="expand">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="姓名">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="数字">
            <span>{{ props.row.number }}</span>
          </el-form-item>
          <el-form-item label="类型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="权限">
            <span>{{ props.row.grade }}</span>
          </el-form-item>
          <el-form-item label="地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
        </el-form>
      </template>
      <template slot-scope="scope" slot="username">
        <el-tag>{{scope.row.username}}</el-tag>
      </template>
      <template slot-scope="scope" slot="nameForm">
        <avue-crud-input @click.native="tip" v-model="user.name">
        </avue-crud-input>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="primary" icon="el-icon-check" size="small" plain @click.stop.safe="handleEdit(scope.row,scope.index)">编辑</el-button>
        <el-button icon="el-icon-check" size="small" @click.stop.safe="handleGrade(scope.row,scope.index)">权限</el-button>
      </template>
    </avue-crud>
    <el-button @click.native="formate" style="margin: 8px 0">格式化</el-button>
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 15}" placeholder="请输入内容" v-model="formJson">
    </el-input>
    <el-dialog title="菜单" :visible.sync="grade.box" width="40%">
      <el-tree :data="menuAll" :default-checked-keys="grade.check" :default-expanded-keys="grade.check" show-checkbox node-key="id">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleGradeUpdate">更新</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'
import tableOption from '@/const/table/tableOption'
import { validatenull } from '../../../packages/utils/validate'
export default {
  name: 'table',
  data() {
    return {
      tableSearch: {},
      tableOption: tableOption, //表格设置属性
      tableData: [], //表格的数据
      tableRow: {},
      tablePage: 1,
      tableLoading: false,
      tabelObj: {},
      formJson: '',
      user: {},
      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10 //每页显示多少条
      },
      grade: {
        box: false,
        check: []
      }
    }
  },
  created() {
    this.formJson = JSON.stringify(tableOption, null, 2)
    this.handleList()
  },
  watch: {},
  mounted() {},
  computed: {
    ...mapGetters(['permission', 'menuAll'])
  },
  props: [],
  methods: {
    tip() {
      this.$notify({
        message: '点击事件'
      })
    },
    formate() {
      let p = new Promise((resolve, reject) => {
        resolve(JSON.parse(this.formJson))
      })
      p
        .then(data => {
          this.tableOption = data
          this.formJson = JSON.stringify(data, null, 2)
          this.$notify({
            message: '数据加载成功',
            type: 'success'
          })
        })
        .catch(err => {
          this.$notify({
            center: true,
            dangerouslyUseHTMLString: true,
            message: `JSON格式错误<br \>\n${err}`,
            type: 'error'
          })
        })
    },
    /**
     * @title 刷新数据
     *
     **/
    handlerefreshChange(page) {
      this.handleList(this.tableSearch)
      this.$notify({
        message: `刷新数据成功${JSON.stringify(page)}`,
        type: 'success'
      })
    },
    /**
     * @title 权限更新
     *
     **/
    handleGradeUpdate() {
      this.tabelObj.check = [].concat(this.grade.check)
      this.tabelObj = {}
      this.grade.check = []
      this.grade.box = false
    },
    /**
     * @title 权限选择
     *
     **/
    handleGradeCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.grade.check.push(data.id)
      } else {
        this.grade.check.splice(this.grade.check.indexOf(data.id), 1)
      }
    },
    handleRowEdit() {
      if (validatenull(this.tableRow)) {
        this.$notify({
          showClose: true,
          message: '请选择一行要编辑的数据',
          type: 'error'
        })
        return false
      } else if (this.tableRow.length > 1) {
        this.$notify({
          showClose: true,
          message: '请选择一行数据，不要选择多行',
          type: 'error'
        })
        return false
      }
      this.handleEdit(this.tableRow[0], -1)
    },
    handleEdit(row, index) {
      this.$refs.crud.rowEdit(row, index)
    },
    /**
     * @title 打开权限
     */
    handleGrade(row, index) {
      this.$store.dispatch('GetMenuAll').then(data => {
        this.grade.box = true
        this.tabelObj = row
        this.grade.check = this.tabelObj.check
      })
    },
    /**
     * @title 导出excel
     *
     **/
    handleExport() {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['username', 'name']
        const filterVal = ['username', 'name']
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel(tHeader, data, this.filename)
      })
    },
    /**
     * @title 导出图片
     *
     **/
    handleJpeg() {
      let vm = this
      let table = this.$refs.crud.$el
      html2canvas(table).then(canvas => {
        var url = canvas.toDataURL()
        let a = document.createElement('a')
        a.href = url
        a.download = '未命名'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    /**
     * @title 页面改变值
     *
     **/
    handleCurrentChange(val) {
      this.tablePage = val
      this.handleList()
    },
    /**
     * @title 搜索按钮回掉
     *
     **/
    handleSearchChange(form) {
      this.tableSearch = form
      this.$notify({
        showClose: true,
        message: JSON.stringify(this.tableSearch),
        type: 'success'
      })
      this.handleList(this.tableSearch)
    },
    /**
     * @title 打开新增窗口
     * @detail 调用crud的handleadd方法即可
     *
     **/
    handleAdd() {
      this.$refs.crud.rowAdd()
    },
    /**
     * @title 选中第几行
     * @param row 选中那几行数据
     * @detail 调用crud的toggleSelection方法即可
     *
     **/
    toggleSelection(row) {
      this.$refs.crud.toggleSelection(row)
    },
    /**
     * @title 获取数据
     * @detail 赋值为tableData表格即可
     *
     **/
    handleList(form) {
      this.tableLoading = true
      this.$store
        .dispatch(
          'GetTableData',
          Object.assign({}, form, { page: `${this.tablePage}` })
        )
        .then(data => {
          setTimeout(() => {
            this.tableData = data.tableData
            this.page = {
              total: data.total,
              currentPage: this.tablePage,
              pageSize: data.pageSize
            }
            this.tableLoading = false
          }, 1000)
        })
    },
    /**
     * @title 当前选中的数据
     * @param val 选中的值
     *
     **/
    handleSelectionChange(val) {
      this.tableRow = val
      this.$notify({
        showClose: true,
        message: JSON.stringify(val),
        type: 'success'
      })
    },
    /**
     * @title 数据添加
     * @param row 为当前的数据
     * @param done 为表单关闭函数
     *
     **/
    handleSave(row, done) {
      this.tableData.push(Object.assign({}, row))
      done()
      setTimeout(() => {
        this.$notify({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
      })
    },
    /**
     * @title 行双击
     * @param row 为当前的数据
     * @param event 事件
     *
     **/
    handleRowDBLClick(row, event) {
      this.$notify({
        showClose: true,
        message: '双击',
        type: 'success'
      })
    },

    /**
     * @title 行单机
     * @param row 为当前的数据
     * @param event 事件
     * @param column 列
     *
     **/
    handleRowClick(row, event, column) {
      this.$notify({
        showClose: true,
        message: '单机',
        type: 'success'
      })
    },
    handleRowDel() {
      if (validatenull(this.tableRow)) {
        this.$notify({
          showClose: true,
          message: '请选择一行要删除的数据',
          type: 'error'
        })
        return false
      } else if (this.tableRow.length > 1) {
        this.$notify({
          showClose: true,
          message: '请选择一行数据，不要选择多行',
          type: 'error'
        })
        return false
      }
      this.handleDel(this.tableRow[0], -1)
    },
    /**
     * @title 数据删除
     * @param row 为当前的数据
     * @param index 为当前更新数据的行数
     *
     **/
    handleDel(row, index) {
      this.$confirm(`是否确认删除序号为${row.name}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableData.splice(index, 1)
          this.$notify({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
        })
        .catch(err => {})
    },
    /**
     * @title 数据更新
     * @param row 为当前的数据
     * @param index 为当前更新数据的行数
     * @param done 为表单关闭函数
     *
     **/
    handleUpdate(row, index, done) {
      this.tableData.splice(index, 1, Object.assign({}, row))
      done()
      setTimeout(() => {
        this.$notify({
          showClose: true,
          message: '修改成功',
          type: 'success'
        })
      })
    },
    /**
     * @title 表单关闭前处理
     * @param done
     *
     **/
    boxhandleClose(done) {
      this.$notify({
        showClose: true,
        message: '表单关闭前处理事件',
        type: 'success'
      })
      done()
    },
    boxhandleOpen(show) {
      this.$notify({
        showClose: true,
        message: '表单打开前处理事件',
        type: 'success'
      })
      show()
    }
  }
}
</script>

<style lang="scss" scoped>
.table-container {
  padding: 8px 10px;
}
.table-header {
  margin-bottom: 10px;
  & > .el-button {
    padding: 12px 25px;
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
